<template>
    <div>
        <div class="inviteSearch">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo"></use>
            </svg>
            <div class="line"></div>
            <input type="text" placeholder="输入客户姓名/手机号查询" v-on:focus="onFocus =true" v-model="searchString">
            <button v-show="onFocus" class="searchBtn" @click="search">确定</button>
        </div>
        <div class="inviteList">
            <show-list :clientList="clientList" :noMore="noMore"></show-list>
            <div class="moreBtn" @click="getList">{{noMore}}</div>
        </div>
    </div>
</template>
<script>
import showList from "@/components/showList"
import qs from "qs"

export default {
    components: { showList },

    data: function () {
        return {
            onFocus: false,
            isMobile: 1,
            memberId: window.localStorage.memberId,
            secMemberId: this.$route.params,
            page: 1,
            limit: 10,
            loadType: false,
            dataLength: 16,
            searchString: "",
            noMore: "点击加载更多",
            clientList: []
        }
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            this.noMore = "正在加载数据中";
            if (this.loadType) {
                return
            }
            // if (this.page * this.limit >= this.dataLength + this.limit) {
            //     this.noMore = "没有更多数据了";
            //     return
            // }
            this.loadType = true;
            if(this.secMemberId){
                var param = {
                    isMobile: this.isMobile,
                    memberId: this.memberId,
                    secMemberId: this.secMemberId.id,
                    page: this.page,
                    limit: this.limit
                }
            }else{
                var param = {
                    isMobile: this.isMobile,
                    memberId: this.memberId,
                    page: this.page,
                    limit: this.limit
                }
            };
            param = qs.stringify(param);
            this.$ajax.post("/salesman/getInvestInfoBySalesman.do", param).then(retData => {
                this.loadType = false;
                this.noMore = "点击加载数据";
                if (retData.data.data == []) {
                    this.noMore = "没有更多数据了";
                    return
                }
                this.clientList = this.clientList.concat(retData.data.data);
                this.page++
            })
        },
        search() {
            this.page = 1;
            let truename, telphone;
            let searchString = parseInt(this.searchString);
            if (isNaN(searchString)) {
                truename = this.searchString
            } else {
                telphone = searchString
            }
            let param = {
                isMobile: this.isMobile,
                memberId: this.memberId,
                page: this.page,
                limit: this.limit,
                truename: truename,
                telphone: telphone
            }
            param = qs.stringify(param);
            this.$ajax.post("/salesman/getInvestInfoBySalesman.do", param).then(retData => {
                this.clientList = retData.data.data;
                this.onFocus = false
            })
        }
    }
}
</script>

<style>
.inviteSearch {
    width: 91%;
    margin: .33rem auto
}

.inviteSearch {
    height: .89rem;
    display: flex;
    align-items: center;
}

.inviteSearch .icon,
.inviteSearch .line {
    position: absolute;
    left: .7rem
}

.inviteSearch .icon {
    color: #333a4b;
    font-size: .4rem
}

.inviteSearch .line {
    height: .4rem;
    left: 1.3rem
}

.inviteSearch input {
    border: none;
    width: 100%;
    height: 100%;
    padding-left: 1rem;
    border-radius: 10px;
    font-size: .25rem
}

.searchBtn {
    border: none;
    background: #333a4b;
    color: white;
    width: 1rem;
    font-size: .2rem;
    border-radius: 10px;
    padding: .2rem;
    margin-left: .5rem
}

.inviteList .bidName {
    margin: 0;
    border: none;
    color: #999
}
</style>
